<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>props的基本用法</title>
</head>

<body>
  <!-- 准备一个“容器” -->
  <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
</body>
<!-- react 核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react 操作dome -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.13.17/babel.min.js"></script>

<!-- 引入prop-type，用于对组件标签属性的限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>

<script type="text/babel">

  // 1.创建类式组件
  class Person extends React.Component {
    render() {
      const { name, age, sex } = this.props
      //  this.props.name = 'jack' // props 是只读属性，不能进行修改
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>姓别：{sex}</li>
          <li>年龄：{age + 1}</li>
        </ul>
      )
    }
  }

  // 对类型和默认性的限制
  Person.propTypes = {
    name: PropTypes.string.isRequired, // 限制name为字符串，且必传
    sex: PropTypes.string, // sex为字符串
    age: PropTypes.number, // age为数值
    speak: PropTypes.func // 函数类型
  }
  // 设置默认值
  Person.defaultProps = {
    sex: '不男不女',
    age: 18
  }
  // 2.渲染组件到页面
  ReactDOM.render(<Person name='小红' age={15} sex='女' speak={speak} />, document.getElementById('test1'))
  ReactDOM.render(<Person name='小明' />, document.getElementById('test2'))

  const p = { name: '老王', age: 26, sex: '男' }

  ReactDOM.render(<Person {...p} />, document.getElementById('test3'));
  function speak() {
    console.log('哈哈哈哈哈')
  }
</script>

</html>